
@import "./yohohead.scss";

@import "./yohofooter.scss";


.goods-content{
    @include w();
    .goods-head{
        width: 100%;
        padding: 15px 0;
        font-weight: 700;
        font-size: 12px;
    }
    .goodsList{
        width: 100%;
        display: flex;
        .goods-nav{
            width: 160px;
            height: max-content;
            margin-bottom: 10px;
            border-bottom: 1px solid rgb(231, 231, 231);
            h3{
                width: 100%;
                height: 28px;
                line-height: 28px;
                font-size: 12px;
            }
        }
    
        .cont-right{
            flex: 1;
            .filter-box{
                &>div{
                    &+div{
                        border-top: 0 !important;
                    }
                }
                .brand{
                    display: flex;
                    border: 1px solid #9196a0;
                    padding: 10px;
                    .title{
                       width: 75px;
                    }
                    .brandList{
                        flex: 1;
                        li{
                            float: left;
                            &+li{
                                padding-left:50px;
                            }
                            
                            a{
                                color: #3a3a3a;
                                &:hover{
                                    border-bottom: 1px solid #000;
                                }
                            }
                        }
                    }
                }
            }
            .sort-pager{
                height: 48px;
                line-height: 48px;
                background-color: #f5f7f6;
                padding: 0 10px;
                margin: 10px 0;
                a{
                    padding-right:20px;
                    color: #000;
                }
                .page{
                    float: right;
                }
            }
            .pageBox{
                width: max-content;
                margin: 0 auto;
                padding: 20px;
                span{
                    margin: 0 10px;
                }
                button{
                    background-color: #fff;
                    border: 1px solid #333;
                    width: 80px;
                    height: 30px;
                    font: 16px;
                    cursor: pointer;
                }
            }
        }

        .goods-list-cont{
            width: 100%;
            min-height: 800px;
            margin-top: 50px;
            ul{
                display: flex;
                flex-wrap: wrap;
                li{
                    width: 25%;
                    box-sizing: border-box;
                    padding: 30px;
                    &:hover{
                        box-shadow: 0 0 6px 3px rgba($color: #000000, $alpha: .3);
                    }
                    .goods{
                        width: 100%;
                        height: 100%;
                        a{
                            display: block;
                            width: 150px;
                            height: 150px;
                            background-color: #9196a0;
                            margin: 0 auto;
                        }
                        img{
                            width: 100%;
                            display: block;
                            margin: 0 auto;
                        }
                        p{
                            width: 100%;
                            margin-top:20px;
                            display: -webkit-box;    
                            -webkit-box-orient: vertical;    
                            -webkit-line-clamp: 2;    
                            overflow: hidden;
                        }
                        span{
                            color: red;
                        }
                    }
                }
            }
        }
    }
}



.returnTop{
    width: 60px;
    height: 60px;
    background-color: #baa7a7;
    position: fixed;
    right: 8%;
    bottom: 10%;
    font-size: 30px;
    color: white;
    @include textCenter(60px);
    cursor: pointer;
    display: none;
    &:hover{
        background-color: #000;
    }
}